<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="css/shopCart.css">
</head>

<body>
    <header>

    </header>
    <section>
        <div id="cart_bigWrap">
            <div class="cat_nav">
                <div class="goods_count">
                    <p class="goods_count_one">
                        全部商品<span class="one_count">0</span>
                    </p>
                    <p class="goods_count_two">
                        优惠<span class="two_count">0</span>
                    </p>
                    <p class="goods_count_three">
                        库存紧张<span class="three_count">0</span>
                    </p>
                </div>
            </div>
            <div class="cart_head">
                <p class="choose_all">
                    <input type="checkbox" class="all_but"> 全选
                </p>
                <p class="goods_message">
                    商品信息
                </p>
                <p class="goods_price">
                    单价(元)
                </p>
                <p class="goods_counts">
                    数量
                </p>
                <p class="goods_subtotal">
                    小计(元)
                </p>
                <p class="goods_operation">
                    操作
                </p>
            </div>
            <div class="cart_centre">
                <div class="itme itme_one">
                    <p class="itme_choose one_choose">
                        <input type="checkbox" class="check">
                    </p>
                    <dl class="itme_message one_message">
                        <dt>
                            <img src="img/27.jpg" alt="">
                        </dt>
                        <dd>
                            <p class="text_message">春季套装新款大码女装微胖妹妹遮肚连衣裙洋气减龄显瘦心机两件套</p>
                            <p class="text_discount">减价6.66</p>
                        </dd>
                    </dl>
                    <div class="itme_CandR one_CandR">
                        <p class="color">颜色：黑色</p>
                        <p class="size">尺码：XL（建议120-140斤）</p>
                    </div>
                    <div class="itme_price one_price">
                        <p class="itme_price_original original_price">998</p>
                        <p class="itme_price_present present_price">98</p>
                        <p class="itme_price_discount discount_price">1折</p>
                    </div>
                    <div class="itme_count one_count">
                        <button type="button" class="sub">-</button>
                        <input type="text" class="count" value="1" readonly/>
                        <button type="button" class="add">+</button>
                    </div>
                    <p class="itme_subtotal one_subtotal">98</p>
                    <p class="itme_delete">删除</p>
                </div>
                <div class="itme itme_two">
                    <p class="itme_choose two_choose">
                        <input type="checkbox" class="check">
                    </p>
                    <dl class="itme_message two_message">
                        <dt>
                            <img src="img/28.jpg" alt="">
                        </dt>
                        <dd>
                            <p class="text_message">春季套装新款大码女装微胖妹妹遮肚连衣裙洋气减龄显瘦心机两件套</p>
                            <p class="text_discount">减价8.88</p>
                        </dd>
                    </dl>
                    <div class="itme_CandR two_CandR">
                        <p class="color">颜色：白色</p>
                        <p class="size">尺码：XL（建议120-140斤）</p>
                    </div>
                    <div class="itme_price two_price">
                        <p class="itme_price_original original_price">1998</p>
                        <p class="itme_price_present present_price">198</p>
                        <p class="itme_price_discount discount_price">1折</p>
                    </div>
                    <div class="itme_count two_count">
                        <button type="button" class="sub">-</button>
                        <input type="text" class="count" value="1" readonly/>
                        <button type="button" class="add">+</button>
                    </div>
                    <p class="itme_subtotal two_subtotal">198</p>
                    <p class="itme_delete">删除</p>
                </div>
            </div>
            <div class="cart_foot">
                <p class="itme_choose all_choose">
                    <input type="checkbox" class="unall_but">
                </p>
                <ul class="choose_operation">
                    <li>反选</li>
                    <li>删除</li>
                    <li>清楚售空商品</li>
                    <li>移入收藏页</li>
                </ul>
                <p class="all_countAndprice">
                    共有<span class="all_count">0</span>件商品，总计<span class="all_price">￥0.00</span>
                </p>
                <p class="payment">去付款</p>
            </div>
        </div>
    </section>
    <footer>

    </footer>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/checkAll.js"></script>
<script src="js/xiding.js"></script>
<script>
    $("header").load("./head.html", function() {})
    $("footer").load("./foot.html", function() {})

    $(".all_but").checkAllBind($(".cart_centre :checkbox"), $(".unall_but"));

    computedTotal();
    $(".sub").click(function() {
        changeNum($(this), "-")
    });

    $(".add").click(function() {
        changeNum($(this), "+")
    });
    $(".itme_delete").click(function() {
        $(this).parent().remove();
        computedTotal();
    });

    $(".all_but").change(function() {
        computedTotal();
    });

    $(".check").change(function() {
        computedTotal();
    });
    $(".unall_but").change(function() {
        computedTotal();
    });

    // 修改加减按钮的数字
    function changeNum(obj, operation) {
        // 1、获取原来的数量个数跟价格
        let price = obj.parent().parent().find(".itme_price_present").html();
        let count = obj.parent().parent().find(".count").val();
        // 2、修改数量个数
        operation == "+" ? count++ : count--;
        count = count < 1 ? 1 : count;
        // 3、把结果显示在页面上
        // 修改数量个数
        obj.parent().parent().find(".count").val(count);
        // 修改小计
        obj.parent().parent().find(".itme_subtotal").html(price * count);
        // 4、修改商品数量的合计跟花费的合计
        computedTotal();
    }
    // 商品数量的合计跟花费的合计
    function computedTotal() {
        let subTotals = $(".itme_subtotal");
        let count = $(".count");
        let totalCount = 0;
        let totalPrice = 0;
        for (let i = 0; i < subTotals.length; i++) {
            let $checkbox = subTotals.eq(i).parent().find(":checkbox")
            if ($checkbox.prop("checked")) {
                // 商品数量合计
                totalCount = totalCount + parseFloat(count[i].value);
                // 花费合计
                totalPrice = totalPrice + parseFloat(subTotals[i].innerHTML);
            }
        }
        $(".all_count").html(totalCount);
        $(".all_price").html(totalPrice + ".00");
    }
</script>

</html>